import Tag from "@/components/Tag";
import FigmaLogo from '@/assets/images/figma-logo.svg';
import NotionLogo from '@/assets/images/notion-logo.svg';
import SlackLogo from '@/assets/images/slack-logo.svg';
import RelumeLogo from '@/assets/images/relume-logo.svg';
import FramerLogo from '@/assets/images/framer-logo.svg';
import GitHubLogo from '@/assets/images/github-logo.svg';
import IntegrationsColumn from "@/components/IntegrationsColumn";

const integrations = [
    { name: "Figma", icon: FigmaLogo, description: "Figma is a collaborative interface design tool." },
    { name: "Notion", icon: NotionLogo, description: "Notion is an all-in-one workspace for notes and docs." },
    { name: "Slack", icon: SlackLogo, description: "Slack is a powerful team communication platform." },
    { name: "Relume", icon: RelumeLogo, description: "Relume is a no-code website builder and design system." },
    { name: "Framer", icon: FramerLogo, description: "Framer is a professional website prototyping tool." },
    { name: "GitHub", icon: GitHubLogo, description: "GitHub is the leading platform for code collaboration." },
];

export type IntegrationsType = typeof integrations;

export default function Integrations() {
    return (
        <section className="py-24 overflow-hidden">
            <div className="container">
                <div className="grid lg:grid-cols-2 lg:gap-16 items-center">
                    <div>
                        <Tag>Integrations</Tag>
                        <h2 className="mt-6 text-6xl font-medium">
                            Plays well with <span className="text-lime-400">others</span>
                        </h2>
                        <p className="mt-4 text-lg text-white/50">
                            Layers seamlessly connects with your favorite tools, making it easy to plug into any workflow and collaborate across platforms.
                        </p>
                    </div>
                    <div>
                        <div className="mt-8 lg:mt-0 h-[400px] lg:h-[800px] grid md:grid-cols-2 gap-4 overflow-hidden [mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]">
                            <IntegrationsColumn integrations={integrations} />
                            <IntegrationsColumn integrations={integrations.slice().reverse()} className="hidden md:flex" />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}
